/* eslint-disable no-unused-vars */
/* eslint-disable no-constant-condition */
/* eslint-disable react/react-in-jsx-scope */
import Icon from '@/components/Icon'
import { likeArticle } from '@/store/actions/articleDetail'
import { RootState } from '@/types/store'
import { Toast } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'

type Props = {
  // normal 普通评论
  // reply 回复评论
  type?: 'normal' | 'reply',
  // scrollToComment: () => void,
  // openInput: () => void
  onComment:()=>void,
  showComment:()=>void
}

const CommentFooter = ({ type = 'normal', onComment, showComment }: Props) => {
  const { article, comment } = useSelector((state:RootState) => state.articleDetail)
  const dispatch = useDispatch()
  const onLike = async () => {
    await dispatch(likeArticle(article.art_id, article.attitude))
    Toast.show('操作成功')
  }
  return (
    // <div>CommentFooter</div>
    <div className={styles.root}>
      <div className="input-btn" onClick={showComment}>
        <Icon type="iconbianji" />
        <span>抢沙发</span>
      </div>

      {type === 'normal' && (
        <>
          <div className="action-item" onClick={onComment}>
            <Icon type="iconbtn_comment" />
            <p>评论</p>
            {comment.total_count > 0 && <span className="bage">{comment.total_count}</span>}
          </div>
          <div className="action-item" onClick={onLike}>
            <Icon type={ article.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
            <p>点赞</p>
          </div>
          <div className="action-item">
            <Icon type={article.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'} />
            <p>收藏</p>
          </div>
        </>
      )}

      {type === 'reply' && (
        <div className="action-item">
          <Icon type={1 ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
          <p>点赞</p>
        </div>
      )}

      <div className="action-item">
        <Icon type="iconbtn_share" />
        <p>分享</p>
      </div>
    </div>
  )
}

export default CommentFooter
